<template>
  <div class="setCommon">
    <el-scrollbar class="wertc-scrollbar" wrap-class="wertc-scrollbar__wrap">
      <el-form
        :model="form"
        size="small"
        label-width="100px"
        :hide-required-asterisk="true"
        :rules="rules"
        ref="form"
      >
        <!-- <el-form-item :label="$t('m.CLASS_START_MODE')" prop="enabled">
          <el-select
            v-model="form.ondutyStatus"
            :placeholder="$t('m.tip.PLEASE_SELECT')"
            popper-class="default-select-popper"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :value="$t('m.dict.openTypeMode')[item.value]"
              :label="$t('m.dict.openTypeMode')[item.value]"
            ></el-option>
          </el-select>
        </el-form-item>-->

        <el-form-item :label="$t('m.LOCK_SCREEN_PASSWORD')" prop="password">
          <el-input v-model="form.lockPassWord" style="width:30%" type="password" show-password />
        </el-form-item>
      </el-form>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      form: {
        ondutyStatus: 'automaticClass', //
        lockPassWord: '', //
      },
      typeOptions: [
        { value: 'automaticClass', label: '自动开班' },
        { value: 'manualClass', label: '手动开班' },
      ],
      rules: {},
    }
  },
  methods: {
    // 保存
    handleSubmit() {
      let _this = this
      this.$refs['form'].validate((valid) => {
        if (valid) {
          _this.$emit('close')
          if (_this.form.lockPassWord) {
            localStorage.setItem('lockPassWord', _this.form.lockPassWord)
          }
        }
      })
    },
  },
  mounted() {
    // 获取软电话
    this.form.lockPassWord = localStorage.getItem('lockPassWord')
  },
}
</script>

<style lang="scss" scoped>
.setCommon {
  height: 100%;
  .wertc-scrollbar {
    height: 100%;
  }
  /deep/.wertc-scrollbar__wrap {
    width: auto;
    overflow-x: hidden;
    margin-right: -20px !important;
  }
  .el-form {
    .el-form-item {
      /deep/.el-form-item__label {
        color: #fff;
      }
      /deep/.el-input__inner {
        width: 100%;
        background-color: #1a4969;
        color: #fff;
      }
      /deep/.el-switch__label {
        color: #fff;
        &.is-active {
          color: #13ce66;
        }
      }
    }
  }
}
</style>